<!--商品列表组件-->
<template>
  <view class="content">
		<view class="goods" v-for="item in list" :key="item.id">
			<view class="info">
				<image class="pic" :src="item.img" mode="aspectFill" lazy-load="true"/>
				<view class="intro">
					<p class="name">{{item.name}}</p>
					<view class="bottom">
						<view class="bottom-left">
							<image v-if="item.discount" class="discount" src="../../static/home_icon/home_icon_offer@2x.png" mode="scaleToFill"></image>
							<p>¥{{item.price}}
								<span class="price">¥{{item.vipprice}}</span>
							</p>
						</view>
						<view class="bottom-right">
							<image @click="loadGoods(item.id)" class="buy" src="../../static/home_icon/home_btn_buy@2x.png" mode="scaleToFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
  </view>
</template>
<script>
export default {
  props: {
		list: {
			/**
			 * [{params}]
			 * id: 商品id
			 * discount: 折扣
			 * img: 图片地址
			 * name: 商品名
			 * price: 原价
			 * salenum: 销量
			 * tiaoid: skuid
			 * vipprice: 现价
			 */
			type: Array
		}
	},
  data () {
    return {}
  },
  onReady () {
	},
  methods: {
		loadGoods(id) {
			this.$emit('loadGoods', id)
		}
	},
  computed: {},
  components: {},
  watch: {}
}
</script>
<style scoped lang="scss">
	@import '~@/common/css/mixin.scss';
	
	.content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.goods {
			display: flex;
			flex-direction: column;
			border-radius: 12upx;
			overflow: hidden;
			margin-bottom: 12upx;
			width: 345upx;
			box-sizing: border-box;
			background-color: #fff;
			.info {
				display: flex;
				flex-direction: column;
				width: 100%;
				.pic {
					width: 100%;
					height: 358upx;
					background-color: #fff;
					border-top-left-radius: 5upx;
					border-top-right-radius: 5upx;
				}
				.intro {
					padding: 24upx;
					font-size: 24upx;
					line-height: 40upx;
					text-align: left;
					.name {
						color: $M_F;
						height: 80upx;
						overflow: hidden;
					}
					.bottom {
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						.bottom-left {
							flex: 1;
							display: flex;
							flex-direction: column;
							color: $M_F;
							font-size: 26upx;
							.discount {
								@include wh(56upx, 26upx);
							}
							.price {
								margin-left: 10upx;
								color: $SUB_F;
								font-size: 18upx;
								text-decoration: line-through;
							}
						}
						.bottom-right {
							width: 54upx;
							height: 54upx;
							.buy {
								@include wh(100%, 100%);
							}
						}
					}
				}
			}
		}
	}
	
</style>
